<template>
  <div id="mains">
    <div class="topInput">
      <div class="topBox topbtn">
        <div class="topbtnInner">
          <el-button type="primary" @click="addnewinfo">新增</el-button>

          <el-dialog title="部门管理" :visible.sync="dialogFormVisible" v-if="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="部门名称" :label-width="formLabelWidth">
                <el-input v-model="form.startTime" ref="time" autocomplete="on"></el-input>
              </el-form-item>
              <el-form-item label="部门描述" :label-width="formLabelWidth">
                <el-input v-model="form.endTime" ref="description" autocomplete="on"></el-input>
              </el-form-item>
              <el-form-item label="创建时间" :label-width="formLabelWidth">
                <el-input v-model="form.hours" ref="shijian" autocomplete="on"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="addsector">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>

    <div class="tables">
      <div id="app">
        <div class="innerTable">
          <el-table
                  :header-cell-style="rowClass"
                  :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
                  border
                  @selection-change="handleSelectionChange"
                  style="width: 100%;margin:0 auto;text-align:center;"
          >
            <el-table-column prop="id" align="center" label="部门ID" min-width="30%"></el-table-column>
            <el-table-column prop="name" align="center" label="部门名称" min-width="30%"></el-table-column>
            <el-table-column prop="description" align="center" label="部门描述" min-width="30%"></el-table-column>
            <el-table-column prop="createTime" align="center" label="创建时间" min-width="30%"></el-table-column>

            <el-table-column align="right">
              <template slot="header" slot-scope="scope">
                <el-input @change="chazhao" ref="editsousuo"
                          prefix-icon="iconfont icon-sousuo"
                          v-model="searchTableInfo"
                          placeholder="请输入搜索内容"
                          style="width:240px"
                ></el-input>
              </template>
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="primary"
                        @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 编辑详情模态框 -->
        <el-dialog title="编辑详情" :visible.sync="dialogdetails" v-if="dialogdetails">
          <el-form :model="dialogdetailsInfo">
            <el-form-item label="部门ID" :label-width="formLabelWidth">
              <el-input :disabled="true" v-model="dialogdetailsInfo.id" ref="eidtid" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门名称" :label-width="formLabelWidth">
              <el-input v-model="dialogdetailsInfo.date" ref="editname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门描述" :label-width="formLabelWidth">
              <el-input v-model="dialogdetailsInfo.endTime" ref="editdescription" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="创建时间" :label-width="formLabelWidth">
              <el-input v-model="dialogdetailsInfo.hours" ref="edittime" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogdetails = false">取 消</el-button>
            <el-button type="primary" @click="addedit">确 定</el-button>
          </div>
        </el-dialog>

        <!-- 分页 -->
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                class="user-list-page"
                :total="tableData.length"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "mains",
    data() {
      return {
        tableData:[],
        dialogdetails: false,
        dialogdetailsInfo: {},
        searchTableInfo: "",
        pagesize: 6,
        currpage: 1,
        getSearchInfo: [],
        formLabelWidth: "120px",
        dialogFormVisible: false,
        inputState: true,
        showText: "收起",
        iconShow1: true,
        iconShow2: false,
        currentPage: 1,
        size: 5,
        form: {
          startTime: "",
          endTime: "",
          why: "",
          hours: "",
          seeMan: "",
          sendMan: "",
          who:"",
          name:""
        },
        search: "",
      };
    },
    methods: {

      //编辑按钮
      addedit(){
        this.dialogdetails = false;
        let that = this
        let arr ={
          id:that.$refs.eidtid.value,
          name:that.$refs.editname.value,
          description:that.$refs.editdescription.value,
          createTime:that.$refs.edittime.value
        }
        console.log(arr)
        //获取IP，端口号和接口名
        let url = "/api/updateDept"
        // let data ={epmid:7}
        //请求到后端
        that.$axios({
          method:"post",
          url:url,
          data:JSON.stringify(arr)
        })
                .then((res)=>{
                  that.tableData.push(res.data.data)
                  this.info()
                })
      },

      //新增确定按钮
      //获取当前输入数据
      addsector(){
        this.dialogFormVisible = false
        let that =this
        let data = {
          name:that.$refs.time.value,
          description:that.$refs.description.value,
          createTime:that.$refs.shijian.value
        }
        console.log(data)
        //获取IP，端口号和接口名
        let url = "/api/addDept"
        //发送请求给后端
        this.$axios({
          method:"post",
          url:url,
          data:JSON.stringify(data)
        })
                .then((res)=>{
                  // console.log(res)
                  this.tableData.push(res.data.data)
                })
      },
      //新增按钮
      addnewinfo(){
        this.dialogFormVisible = true
      },

      //删除按钮
      handleDelete(index, row) {
        let that =this
        let url = "/api/delDept"
        let data = {
          id:row.id
        }
        //发送请求给后端
        that.$axios({
          method:"post",
          url:url,
          // headers: {
          //   "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          // },
          data:JSON.stringify(data)
        })
                .then((res)=>{
                  console.log(res)
                  // that.getSearchInfo=res.data.data
                  let that = this
                  let url = "/api/findAllDept"
                  let datas1 = {}
                  that.$axios({
                    method:"post",
                    url:url,
                    data:JSON.stringify(datas1),
                    headers: {
                      "Content-Type": "application/json;charset=utf-8",
                    },
                  })
                          .then((res)=>{
                            console.log(res)
                            console.log(res.data.data)
                            that.tableData = res.data.data
                            console.log(that.getSearchInfo)
                          })
                })
        console.log(index, row);
      },

      //搜索框
      //获取当前输入值
      chazhao(){
        let that = this
        let arr ={
          description:that.$refs.editsousuo.value,
        }
        //获取IP地址，端口号和接口名
        let url = "/api/fuzzyQueryDept"
        that.$axios({
          method:"post",
          url:url,
          data:JSON.stringify(arr)
        })
                .then((res)=>{
                  // that.tableData.push(res.data.data)
                  that.tableData = res.data.data
                })
      },

      rowClass({row,rowIndex}){
        return'line-height:35px'
      },
      handleEdit(index, row) {
        console.log( row);
        console.log(this.intableDatafo)
        this.dialogdetails = true;
        console.log(row)
        this.dialogdetailsInfo = {
          id:row.id,
          name: row.name,
          date: row.startTime,
          endTime: row.endTime,
          hours: row.hours,
          seeMan: row.seeMan,
          address: row.address,
        };
      },

      handleCurrentChange(cpage) {
        this.currpage = cpage;
      },
      handleSizeChange(psize) {
        this.pagesize = psize;
      },
      //操作多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      info() {
        console.log("进入调用了");

        //查询数据并渲染到页面
        let that = this
        let url = "/api/findAllDept"
        let datas1 = {}
        that.$axios({
          method:"post",
          url:url,
          data:JSON.stringify(datas1),
          headers: {
            "Content-Type": "application/json;charset=utf-8",
          },
        })
                .then((res)=>{
                  console.log(res)
                  console.log(res.data.data)
                  that.tableData = res.data.data
                  console.log(that.getSearchInfo)
                })
      },



      sub() {
        console.log("进了");
        console.log(this.form);
        if (
                this.form.endTime !== "" &&
                this.form.startTime !== "" &&
                this.form.why !== "" &&
                this.form.hours !== "" &&
                this.form.seeMan !== "" &&
                this.form.sendMan !== ""
        ) {
          console.log("填好了");
          let pushObj = {
            startTime: this.form.startTime,
            name: this.form.who,
            endTime: this.form.endTime,
            hours: this.form.hours,
            seeMan: this.form.seeMan
          };
          this.getSearchInfo.push(pushObj),
                  (this.form.endTime = ""),
                  (this.form.startTime = ""),
                  (this.form.name = ""),
                  (this.form.why = ""),
                  (this.form.hours = ""),
                  (this.form.seeMan = ""),
                  (this.form.sendMan = "")
        } else {
          alert("表中有未填项，请继续填写");
        }
      },
    },
    computed: {

    },
    created() {
      this.info();
    },
  };
</script>

<style scoped>
  .tables{
    height: 100%;
    padding-top: 0;
    box-shadow: 0 0 3px #e4e4e4;
    margin-top: 20px;

  }
  .innerTable {
    box-shadow:0 0 3px 1px  #e4e4e4;
    width: 80%;
  }
  #app {
    height: 100%;
    width: 100%;
  }

  .topbtnInner {
    width: 60%;
  }

  .topbtn {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  #mains {
    height: 850px;
  }

  .topInput {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-shadow: 0 0 3px #e4e4e4;
  }

  .topBox {
    width: 25%;
    height: 100%;
  }
  .user-list-page{
    text-align: center;
    box-shadow: 0 0 3px 1px #e4e4e4;
    line-height: 50px;
    margin-top: 20px;
    padding-top: 20px;
  }
</style>
